<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 
    上传功梳理
    结构:  1. 必然是存在<input type="file">  
          2. accept 属性 可以限制上传文件的类型 
          3. 一般文件域是会隐藏的
          4. 准备自定义的选择文件的按钮
    业务: 1. 点击自定义的按钮实现文件的选择     点击自定义按钮触发文件域的click事件 
          2. 选择文件后 一般获取到上传文件对象  监听文件域的change事件, 在change事件的处理函数中获取到文件对象
          3. 获取到文件对象后, 发送ajax 上传的请求   
          4. 需要将文件域的value值清空
  -->

  <input type="file" accept=".xlsx, .xls" hidden/>
  <button>漂亮的按钮</button>
  <script>
    const fileIpt = document.querySelector('input')
    const myBtn = document.querySelector('button')
    myBtn.addEventListener('click', ()=> {
      fileIpt.click()
    })

    fileIpt.addEventListener('change', (e)=>{
      console.log(e.target.files[0])
      console.log('axios.post 发送请求, 处理为formData数据格式')
      // 将文件域的value值清空,保证下一次即便选择了相同的文件 change也能触发
      fileIpt.value = null
    })
  </script>
</body>
</html>